<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      @submit.native.prevent
    >
      <el-form-item label="" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入关键字"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
    <div :class="tableMain" v-show="tableMainShow">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增Table</el-button
          >
        </el-col>
        <el-col :span="1.5" style="float: right;">
          <el-button
            size="mini"
            @click="tableExtend(1)"
            icon="el-icon-full-screen"
          >
          </el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableList"
        stripe
        @selection-change="handleMainSelectionChange"
        :header-cell-style="{ background: '#F6F8FB' }"
        @row-click="row => checkColumn(row.id, row.tableName)"
        :height="maxHeight"
        v-scrollbar="'.el-table__body-wrapper'"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          label="编码"
          align="center"
          prop="tableName"
          sortable
        />
        <el-table-column
          label="描述"
          align="center"
          prop="description"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          :formatter="statusFormat"
        />
        <el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="operate-group">
              <span
                style="cursor:pointer;color: #409eff;font-size:12px;"
                type="text"
                class="el-icon-edit"
                :plain="false"
                @click="handleUpdate(scope.row)"
                >编辑</span
              >
              <span
                style="cursor:pointer;color: #409eff;font-size:12px;"
                type="text"
                class="el-icon-delete"
                :plain="false"
                @click="handleDelete(scope.row.id)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <resize-bar v-show="tableMainShow && tableDependShow" />
    <div :class="tableDepend" v-show="tableDependShow">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="columnAdd"
            >新增列</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="cloneAdd"
            >克隆table列</el-button
          >
          <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editAll"
              v-if="!editall"
            >全编辑</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="subEditAll"
              v-if="editall"
            >保存</el-button>
            <el-button
              type="info"
              size="mini"
              @click="cancelEditAll"
              v-if="editall"
            >取消</el-button> -->
        </el-col>
        <el-col :span="1.5" style="float: right;">
          <el-button
            size="mini"
            @click="tableExtend(2)"
            icon="el-icon-full-screen"
          ></el-button>
        </el-col>
        <div class="tableDependTitle">{{ tableDependName }} 的详细列信息</div>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableDependList"
        stripe
        @selection-change="handleDependSelectionChange"
        :header-cell-style="{ background: '#F6F8FB' }"
        :height="maxHeight"
        v-scrollbar="'.el-table__body-wrapper'"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="tableDependList[scope.$index].name"
              v-if="scope.row.fullEdit && editall"
            />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="tableDependList[scope.$index].description"
              v-if="scope.row.fullEdit && editall"
            />
            <span v-else>{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联值" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="tableDependList[scope.$index].prop"
              v-if="scope.row.fullEdit && editall"
            />
            <span v-else>{{ scope.row.prop }}</span>
          </template>
        </el-table-column>
        <el-table-column label="宽度" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="tableDependList[scope.$index].width"
              v-if="!scope.row.fullEdit && editall"
            />
            <span v-else>{{ scope.row.width }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="tableDependList[scope.$index].sort"
              v-if="!scope.row.fullEdit && editall"
            />
            <span v-else>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="operate-group">
              <span
                style="cursor:pointer;color: #409eff;font-size:12px;"
                type="text"
                class="el-icon-edit"
                :plain="false"
                @click="columnUpdate(scope.row.id)"
                >编辑</span
              >
              <span
                style="cursor:pointer;color: #409eff;font-size:12px;"
                type="text"
                class="el-icon-delete"
                :plain="false"
                @click="columnDelete(scope.row.id)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="dependTotal > 0"
        :total="dependTotal"
        :page.sync="queryDependParams.pageNum"
        :limit.sync="queryDependParams.pageSize"
        @pagination="getColumnList"
      />
    </div>

    <!-- 添加或修改table表单对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="500px"
      append-to-body
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="名称" prop="tableName">
          <el-input v-model="form.tableName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改table列对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="columnOpen"
      v-if="columnOpen"
      width="600px"
      append-to-body
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <el-form
        ref="columnForm"
        :model="columnForm"
        :rules="columnRules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="列名称" prop="name">
              <el-input v-model="columnForm.name" placeholder="请输入列名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联值" prop="prop">
              <el-input v-model="columnForm.prop" placeholder="请输入关联值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="columnForm.description"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="align" prop="align">
              <el-select
                v-model="columnForm.align"
                placeholder="请输入align"
                size="small"
              >
                <el-option key="left" label="左侧显示" value="left" />
                <el-option key="right" label="右侧显示" value="right" />
                <el-option key="center" label="居中显示" value="center" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宽度" prop="width">
              <el-input v-model="columnForm.width" placeholder="请输入宽度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类名" prop="className">
              <el-input
                v-model="columnForm.className"
                placeholder="请输入类名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文本类型" prop="propType">
              <el-select
                v-model="columnForm.propType"
                placeholder="默认文本"
                size="small"
              >
                <el-option key="text" label="文本" value="text" />
                <el-option key="list" label="文件列" value="list" />
                <el-option key="file" label="文件" value="file" />
                <el-option key="date" label="日期" value="date" />
                <el-option key="link" label="链接" value="link" />
                <el-option key="button" label="按钮" value="button" />
                <el-option key="progress" label="百分比" value="progress" />
                <el-option key="rate" label="评分" value="rate" />
                <el-option key="preview" label="预览" value="preview" />
                <el-option key="image" label="缩略图" value="image" />
                <el-option key="icon" label="图标" value="icon" />
                <el-option key="user" label="用户" value="user" />
                <el-option key="role" label="角色" value="role" />
                <el-option key="select" label="下拉选择" value="select" />
                <el-option key="switch" label="开关" value="switch" />
                <el-option key="tag" label="标签" value="tag" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :label="columnForm.propType == 'switch' ? 'URL' : '链接'"
          prop="url"
          v-if="
            columnForm.propType == 'link' ||
              columnForm.propType == 'button' ||
              columnForm.propType == 'switch'
          "
        >
          <el-input v-model="columnForm.url" placeholder="请输URL" />
        </el-form-item>
        <el-form-item
          label="页面参数"
          prop="pageParams"
          v-if="
            columnForm.propType == 'link' ||
              columnForm.propType == 'button' ||
              columnForm.propType == 'icon'
          "
        >
          <el-input
            v-model="columnForm.pageParams"
            type="textarea"
            placeholder="请输页面参数"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number
                v-model="columnForm.sort"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="全编辑" prop="fullEdit">
              <!-- <el-switch v-model="columnForm.fullEdit"></el-switch> -->
              <el-input
                v-model="columnForm.fullEdit"
                placeholder="请输入全编辑条件"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!-- <el-form-item label="超长隐藏" prop="showOverflow">
              <el-select v-model="columnForm.showOverflow" placeholder="是否超长度隐藏" size="small">
                <el-option key="true" label="是" value="true"/>
                <el-option key="false" label="否" value="false"/>
              </el-select>
            </el-form-item> -->
            <el-form-item label="超长隐藏">
              <el-switch v-model="columnForm.showOverflow"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <el-form-item label="是否显示" prop="show">
              <el-select v-model="columnForm.show" placeholder="是否显示" size="small">
                <el-option key="true" label="是" value="true"/>
                <el-option key="false" label="否" value="false"/>
              </el-select>
            </el-form-item> -->
            <el-form-item label="是否显示">
              <el-switch v-model="columnForm.show"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否排序">
              <el-switch v-model="columnForm.sortable"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="columnForm.status">
                <el-radio :label="'1'">正常</el-radio>
                <el-radio :label="'0'">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="排序按钮" prop="showSort">-->
        <!--              <el-select v-model="columnForm.showOverflow" placeholder="是否显示排序" size="small">-->
        <!--                <el-option key="0" label="禁用" value="0"/>-->
        <!--                <el-option key="1" label="显示" value="1"/>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitColumnForm">确 定</el-button>
        <el-button @click="cancelColumn">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 克隆table列对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="cloneOpen"
      v-if="cloneOpen"
      width="600px"
      append-to-body
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="" prop="tableName">
            <el-input
              v-model="queryParams.tableName"
              placeholder="请输入关键字"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableList"
          stripe
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#F6F8FB' }"
          @row-click="row => checkColumn(row.id, row.tableName)"
          :height="maxHeight"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="编码"
            align="center"
            prop="tableName"
            sortable
          />
          <el-table-column
            label="描述"
            align="center"
            prop="description"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            :formatter="statusFormat"
          ></el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCloneForm">确 定</el-button>
        <el-button @click="cancelColumn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTable,
  getTable,
  addTable,
  updateTable,
  delTable,
  listDependTable,
  getColumn,
  updateColumnTable,
  addColumnTable,
  delColumn,
  cloneTable
} from '@/api/pms/table'

export default {
  inject: ['app'],
  name: 'Table',
  components: {
    resizeBar: () => import('@/views/components/resizeBar')
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      mainids: [],
      dependids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      dependTotal: 0,
      tableMain: 'table-main',
      tableDependWidth: 0.49,
      tableDepend: 'table-depend',
      tableMainShow: true,
      tableDependShow: true,
      // 表格数据
      tableList: [],
      tableDependList: [],
      tableDependName: '所有表单',
      tableID: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      columnOpen: false,
      cloneOpen: false,
      editall: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.$store.state.user.pageSize || 30,
        tableName: undefined
      },
      queryDependParams: {
        pageNum: 1,
        pageSize: this.$store.state.user.pageSize || 30,
        tableid: undefined
      },
      // 表单参数
      form: {},
      columnForm: {
        show: true,
        showOverflow: false,
        status: '1',
        propType: 'text',
        align: 'center',
        sortable: false
      },
      // 表单校验
      rules: {
        tableName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ]
      },
      // 表单校验
      columnRules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        // label: [
        //   { required: true, message: "label不能为空", trigger: "blur" }
        // ],
        prop: [{ required: true, message: '关联值不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    // this.getColumnList();
  },
  computed: {
    maxHeight() {
      return this.app.screenHeight - 270
    },
    tableMainWidth() {
      return (
        this.app.screenWidth -
        250 -
        this.tableDependWidth * (this.app.screenWidth - 250)
      )
    }
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true
      listTable(this.queryParams).then(response => {
        this.tableList = response.rows
        this.total = response.total
        if (this.tableList.length > 0) {
          this.tableDependName = response.rows[0].tableName
          this.tableID = response.rows[0].id
          this.queryDependParams.tableid = response.rows[0].id
          this.getColumnList()
        } else {
          this.tableDependList = []
          this.dependTotal = 0
        }
        this.loading = false
      })
    },
    getColumnList() {
      this.loading = true
      listDependTable(this.queryDependParams).then(response => {
        this.tableDependList = response.rows
        this.dependTotal = response.total
        this.loading = false
      })
    },
    checkColumn(id, name) {
      this.tableDependName = name
      this.tableID = id
      this.queryDependParams.tableid = id
      this.getColumnList()
    },
    // 表单重置
    reset() {
      this.form = {
        status: 1
      }
      this.columnForm = {
        show: true,
        align: 'center',
        status: '1',
        propType: 'text',
        sort: '1'
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据 main
    handleMainSelectionChange(selection) {
      this.mainids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 多选框选中数据 depend
    handleDependSelectionChange(selection) {
      this.dependids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 状态翻译
    statusFormat(row, column) {
      if (row.status == 1) {
        return '正常'
      } else {
        return '禁用'
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加table表单'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const Id = row.id || this.ids
      getTable(Id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改table表单'
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      // this.reset();
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateTable(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              }
            })
          } else {
            addTable(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              }
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(Id) {
      const Ids = Id || this.ids
      this.$confirm(
        '是否确认删除table表单编号为"' +
          (Array.isArray(Ids) && Ids.length > 2 ? Ids[0] + '等' : Ids) +
          '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delTable(Ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(function() {})
    },
    /** 新增列按钮操作 */
    columnAdd() {
      this.reset()
      if (!this.tableID) {
        this.msgError('请选择table')
        return false
      }
      // this.columnForm = {};
      this.columnOpen = true
      this.title = '添加table列'
    },
    /** 新增列按钮操作 */
    cloneAdd() {
      if (!this.tableID) {
        this.msgError('请选择table')
        return false
      }
      this.cloneOpen = true
      this.title = '克隆table列'
    },
    // 全编辑
    editAll() {
      this.editall = !this.editall
    },
    cancelEditAll() {
      this.editall = false
      this.getColumnList()
    },
    subEditAll() {
      this.editall = false
    },
    /** 修改列按钮操作 */
    columnUpdate(lid) {
      this.reset()
      const Id = lid || this.ids
      getColumn(Id).then(response => {
        this.columnForm = response.data
        this.columnOpen = true
        this.title = '修改table列'
      })
    },
    // 列取消按钮
    cancelColumn() {
      this.columnOpen = false
      this.cloneOpen = false
      this.reset()
    },
    /** 列提交按钮 */
    submitColumnForm: function() {
      this.$refs['columnForm'].validate(valid => {
        if (valid) {
          if (this.columnForm.id != undefined) {
            this.columnForm.tableid = this.tableID
            updateColumnTable(this.columnForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.resetForm('columnForm')
                this.columnOpen = false
                this.getColumnList()
              }
            })
          } else {
            this.columnForm.tableid = this.tableID
            addColumnTable(this.columnForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.resetForm('columnForm')
                this.columnOpen = false
                this.getColumnList()
              }
            })
          }
        }
      })
    },
    /** 克隆列提交按钮 */
    submitCloneForm: function() {
      const Ids = this.ids
      const tId = this.tableID
      if (this.single) {
        this.msgError('不能多选！')
      } else {
        this.$confirm(
          '是否确认克隆table表单编号为"' + Ids + '"的数据?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(function() {
            return cloneTable(Ids, tId)
          })
          .then(() => {
            this.getList()
            this.msgSuccess('克隆成功')
          })
          .catch(function() {})
      }
    },
    /** 删除列按钮操作 */
    columnDelete(Id) {
      const Ids = Id || this.ids
      this.$confirm(
        '是否确认删除table列编号为"' +
          (Array.isArray(Ids) && Ids.length > 2 ? Ids[0] + '等' : Ids) +
          '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delColumn(Ids)
        })
        .then(() => {
          this.getColumnList()
          this.msgSuccess('删除成功')
        })
        .catch(function() {})
    },
    tableExtend(type) {
      if (type === 2) {
        if (this.tableDepend === 'table-depend') {
          this.tableMainShow = false
          this.tableDepend = 'table-extend'
        } else {
          this.tableMainShow = true
          this.tableDepend = 'table-depend'
        }
      } else {
        if (this.tableMain === 'table-main') {
          this.tableDependShow = false
          this.tableMain = 'table-extend'
        } else {
          this.tableDependShow = true
          this.tableMain = 'table-main'
        }
      }
    }
  }
}
</script>
